<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
      <!-- 搜索模块 -->
      <el-form :inline="true" :model="page" class="demo-form-inline" size="small">
          <el-form-item label="关键字">
            <el-input v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
                    class="filter-item"
                    style="width: 100px;"
                    v-model="page.state"
                    @keyup.enter="search"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
      </el-form>
      <!-- 右侧新增技巧按钮 -->
      <el-row type="flex" justify="end" class="add">
            <el-button icon="el-icon-edit" type="success" size="small" @click="showDialog=true">新增技巧</el-button>
      </el-row>
      <!-- 消息提示按钮 -->
      <el-alert
        :title="`数据一共${total}条` "
        type="info"
        :show-icon="true"
        :closable="false"
        >
      </el-alert>
      <!-- 表格数据 -->
      <el-table :data="tableData" >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="文章标题" prop="title" width="280px">
           <template slot-scope="{row}">
            <span style=" margin-right:8px ;">{{ row.title }}</span>
            <i v-if="row.videoURL!==null&&row.videoURL!==''" class="el-icon-film" style="color:#0000FF" @click="Video(row)"></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"></el-table-column>
        <el-table-column label="录入人" prop="username"></el-table-column>
        <el-table-column label="录入时间" prop="createTime">
          <template slot-scope="{row}" >
            {{row.createTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" :formatter="formState" >
          <template slot-scope="{row}">
              <span v-if="row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="previewArticle(row.id)">预览</el-button>
            <el-button type="text" size="mini" >
                <span v-if="row.state==0" @click="start(row)">启用</span>
                <span v-else @click="forbid(row)">禁用</span>
              </el-button>
            <el-button type="text" size="small" @click="editArticles(row.id)" :disabled="row.state===1">修改</el-button>
            <el-button type="text" size="small" @click="delArticle(row.id)" :disabled="row.state===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
        background
        :total="total"
        :page-size="page.pagesize"
        :current-page.sync="page.page"
        @current-change="changePage"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="changeSize"
        layout="prev, pager, next,sizes,jumper">
      </el-pagination>
      </el-row>
      </el-card>
    </div>
    <!-- 新增文章弹层 -->
    <articles-add :showDialog.sync="showDialog" @change="getList" :node="id" ref='articlesForm'/>
    <!-- 预览弹层 -->
    <articles-preview ref="previewForm" :previewDialog.sync="previewDialog" :node="id" :preview="tableData" />
    <!-- 视频弹窗 -->
    <div class="preview-video" v-show="showVideo">
       <div class="closeIcon">
         <span class="el-icon-close" @click="colseVideo"></span>
       </div>
      <div class="showVideo" >
      <video :src="videoURL"  autoplay=autoplay ref="playVideo">
           您的浏览器不支持 video 标签。
      </video>
    </div>
    </div>
  </div>
</template>
<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import { status } from '@/api/hmmm/constants'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
export default {
  // 组件名称
  name: 'articles',
  // 局部注册的组件
  components: {
    ArticlesAdd,
    ArticlesPreview
    // PageTool
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      videoURL: null, // 视频播放地址
      stateId: null, // 操作模块中的启用或禁用的状态
      showVideo: false, // 视频弹窗
      showDialog: false,
      previewDialog: false,
      id: null, // 点击文章的id
      total: 0, // 数据总条数
      page: {
        page: 1,
        pagesize: 10,
        keyword: '', // 关键字
        state: null// 状态
      },
      // 文章列表数据
      tableData: []

    }
  },
  // 计算属性
  computed: {
    status () {
      return status
    }
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.getList()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {},
  // 组件方法
  methods: {
    // 搜索
    search () {
      this.page.page = 1
      this.getList(this.page)
    },
    // 清除
    clear () {
      this.page = {
        page: 1,
        pagesize: 10
      }
      // this.getList()
    },
    // 获取文章列表
    async getList () {
      const { data } = await list(this.page)
      this.tableData = data.items
      this.total = data.counts
      // console.log(data)
    },
    // 分页
    changePage (newPage) {
      // console.log(newPage)
      this.page.page = newPage
      console.log(this.page.page)
      this.getList(this.page)
    },
    // 改变页码
    changeSize (newSize) {
      this.page.pagesize = newSize
      if (this.page.page === 1) {
        this.getList(this.page)
      }
    },
    // 删除文章
    async delArticle (id) {
      try {
        await this.$confirm('确定删除该文章吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    // 遍历状态
    formState (row, column, cellValue, index) {
      const obj = status.find(item => item.value.toSting() === cellValue)
      console.log(obj)
      return obj ? obj.label : '未知'
    },
    // 修改文章
    editArticles (id) {
      this.showDialog = true
      this.id = id
      // console.log(id)
      this.$refs.articlesForm.detail(id)
    },
    // 预览文章
    previewArticle (id) {
      this.previewDialog = true
      this.id = id
      // console.log(id)
      this.$refs.previewForm.preview(id)
    },
    // 点击禁用
    async start (row) {
      row.state = 1
      await changeState({ id: row.id, state: row.state })
    },
    // 点击禁用
    async forbid (row) {
      row.state = 0
      await changeState({ id: row.id, state: row.state })
    },
    // 视频按钮
    Video (row) {
      this.showVideo = true
      console.log(row)
      this.videoURL = row.videoURL
    },
    // 关闭视频
    colseVideo () {
      this.showVideo = false
      this.videoURL = null
      this.$refs.playVideo.pause()
    }
  }
}
</script>

<style scoped lang="scss">
.demo-form-inline {
  position: relative;
}
.add {
  position: absolute;
  right: 34px;
  top: 41px;
}
.preview-video{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
}
.showVideo{
  width: 700px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.showVideo video {
  width: 100%;
  height: 100%;
}
.closeIcon{
  width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
}
</style>
